body{font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center;margin:0;padding:0;background-color:#f8f9fa;}
.affichage{width:40vw;} .titre{font-size:large}
#squirrel-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
margin-left:100px;
border: 3px solid #333;
width: 300px;
height: 300px;
background-color: rgb(246, 250, 247);
}
.squirrel {width: 50px;height: 50px;background-image: url('../../../assets/Img/ecureuil.png');background-size: cover;margin: 5px;position: relative;}
.squirrel.crossed{opacity:.5} .squirrel.crossed::after{content:'X';color:red;font-weight:700;position:absolute;top:10px;left:15px;font-size:24px}

.container{text-align:center;background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1)}
#click{padding:10px 15px;cursor:pointer;border:none;background-color:#007bff;color:#fff;font-size:1em;border-radius:5px;margin-top:7px}
.audio-player{background-color:#fafaef;border-radius:5px;padding:10px}
.clickable-area{position:absolute;cursor:pointer}.area{position:absolute}.area0{top:317px;left:21px;width:40px;height:40px}.area1{top:317px;left:80px;width:40px;height:40px}.area2{top:317px;left:155px;width:40px;height:40px}.area3{top:317px;left:220px;width:40px;height:40px}.area4{top:317px;left:310px;width:40px;height:40px}.area5{top:319px;left:352px;width:40px;height:40px}.area6{top:319px;left:440px;width:40px;height:40px}.area7{top:319px;left:500px;width:40px;height:40px}.area8{top:319px;left:560px;width:40px;height:40px}.area9{top:319px;left:620px;width:40px;height:40px}.area10{top:317px;left:724px;width:40px;height:40px}.hidden{display:none}input{padding:9px;margin:10px 0;font-size:16px}button{padding:10px 20px;margin:10px 0;font-size:16px;font-weight:700;cursor:pointer;background-color:#6e9ef7;color:#fff}.container{text-align:center;background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1)}

@media screen and (min-width: 600px) and (max-width: 1024px){.container{margin-left:0;width:100%;height:auto;margin-bottom:7px}.affichage{width:90%;height:65%}
.titre{margin-left:0;font-size:small;height:auto;margin-bottom:7px}
body{font-family:Arial,Helvetica,sans-serif;height:75%;}.correct{background-color:green;color:#fff}.incorrect{background-color:red;color:#fff}
.lescore{font-size:x-large;color:#045304}.incorrect{background-color:red;color:#fff}
#container{margin-top:50px}
#squirrel-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:20px;margin-left:100px;border:3px solid #333;width:300px;height:300px;background-color:#f6faf7}
#squirrel-container{margin-left:0;width:80%;height:auto;margin-bottom:7px}
#start-btn{width:30%;height:10%;font-size:small}
.audio{width:65%;height:19%}
.click{font-size:small}
.squirrel{width:50px;height:50px;background-image:url('../../../assets/Img/ecureuil.png');background-size:cover;margin:5px;position:relative}.squirrel{width:30px;height:30px}
.squirrel.crossed{opacity:.5}
.squirrel.crossed::after{content:'X';color:red;font-weight:700;position:absolute;top:10px;left:15px;font-size:24px}
#controls{margin-bottom:20px}
#feedback{font-size:18px;font-weight:700;margin-top:20px}
#retry-btn{padding:10px 20px;font-size:16px}
.vertical-part{background-color:#daf8f6}
  .area0 {top: 318px; left: 100px; width: 30px; height: 20px;}
  .area1 { top: 317px; left: 175px; width: 30px; height: 20px; }
  .area2 { top: 317px; left: 220px; width: 30px; height: 25px; }
  .area3 { top: 317px; left: 300px; width: 20px; height: 25px; }
  .area4 { top: 318px; left: 385px; width: 30px; height: 25px; }
  .area5 { top: 319px; left: 450px; width: 30px; height: 20px;}
  .area6 { top: 319px; left: 510px; width: 30px; height: 20px; }
  .area7 { top: 319px; left: 570px; width: 30px; height: 20px; }
  .area8 { top: 319px; left: 660px; width: 30px; height: 20px; }
  .area9 { top: 319px; left: 730px; width: 30px; height: 20px; }
  .area10 { top: 317px; left:798px; width: 35px; height: 20px; }
}
@media (max-width:480px)
{.affichage{width:300px}.audio{margin-left:30px;width:200px;height:70px}#squirrel-container{width:81vw;height:250px;margin-left:0px}.container{max-width:93vw}.bloc{max-width:98vw}.titre{font-size:large}}

 @media (min-width: 600px) and (max-width: 899px) and (orientation:landscape){.bloc{max-width:100vw; overflow-x:hidden}}